<template>
    <div class="home">
        <van-nav-bar title="社区" left-text="" right-text="新增" @click-right="onClickRight" />
        <div style="height: 2.8rem;">
            
        </div>
         <van-pull-refresh v-model="loadingdown" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="finishedtext"
          @load="onLoad"
          :offset='180'
        >  
        <div v-if="datalistlength" style="width: 100%;text-align: center;margin-top: 50%;margin-bottom: 1.25rem;">
                    <img style="width: 9.375rem;height: 8.8125rem;" src="../img/kong9@2x.png"/>
                        
            </div>  
            <!--loading{{loading}} <br /> finished{{finished}}  <br />totalPage{{totalPage}}-->
        <div v-for="(item,index) in datalist" :key="index" class="hometitle" @click="hometitle(item.id)" >
            
            <div class="hometitletop">
                <div class="homeimg">
                   
                    <p style="width: 2.5rem; height: 2.5rem ;border-radius:1.25rem ;overflow: hidden;margin-right: 0.625rem;">
                      <img v-if="item.is_official && (item.user.avatar=='string' || item.user.avatar == '' || item.user.avatar== null || item.user.avatar==undefined )" class="home_img" border='0' src="../img/guanfang2@2x.png" />
                        
                       <img v-else-if="item.user.avatar=='string' || item.user.avatar == '' || item.user.avatar== null || item.user.avatar==undefined " class="home_img"  src='../img/banckgroun@2x.png' />
                       

                       <img v-else class="home_img" border='0' :src="item.user.avatar" />
                       
                      
                        
                    </p>
                    <div class="home_p">
                        <span> {{item.user.nickname}}  <img v-if='item.is_official'  style="width: 1.3rem;height: 0.7625rem; " src="../img/guanfnag@2x.png"/>  </span>
                        <!--<span> {{item.user.nickname}} <a v-if='item.is_official' style="font-size: 0.55rem;color: rgba(107, 80, 248, 1);border: 0.03125rem solid;padding: 0rem 0.0875rem;">官方</a> </span>-->
                        <span>{{$getDateCycle(item.created_timestamp)}}</span>
                    </div>
                </div>
                <div class="homeimg">
                    <p>                      
                        <img v-if="item.level==1" style=" width: 0.65625rem;
        height: 0.6875rem;" class="home_img_right" src="../img/img@2x.png" />
                        <img v-if="item.level==2" style=" width: 0.65625rem;
        height: 0.6875rem;" class="home_img_right"  src="../img/hone@2x.png"/>
                    </p>
                    <p><span v-if="item.level==1" class="home_p_span">置顶 </span> <span v-if="item.level==2" class="home_p_span">热门 </span></p>
                </div>
            </div>
            <div class="home_conent" ref="getheight">
                
                <p  v-html='item.content'>
                            
                </p>
                
                <p :class="item.images_list.length>2?'homep':'homepcenter'" v-if='item.images_list!=undefined && item.images_list.length>0'>
                   <!--<img src="https://mchain-app.oss-ap-southeast-1.aliyuncs.com/community/image/ead58077-9a13-4f96-b759-5a7abc6777bd.jpeg"/>-->
                   <!--<img style="width: 6.25rem;
    height: 6.25rem;display: inline-block;" src="../img/aaa.jpeg"/>-->
    <span style="width: 6.25rem;
    height: 6.25rem;display: inline-block;overflow: hidden;padding-right: 0.6rem;" v-for="(img,index) in item.images_list" :key='index' ><img class="imgss"   :src="img" /></span>
                   
                    
                </p>
            </div>
            
            <div class="homepbottom">
                
                <p><span><img v-if="item.is_like==false" src="../img/xin@2x.png"/><img v-if="item.is_like==true" src="../img/istrue2@2x.png"/>{{item.like_count}}</span><span></span></p>
                <p><span><img src="../img/img1@2x.png"/>{{item.comment_count}}</span><span></span></p>
            </div>
        </div>
     
        
        </van-list>
        </van-pull-refresh>
        
    </div>
</template>

<script>
    import {addCookie,getCookie} from "../api/addCookie"
    export default {
        name: 'home',
        data() {
            return {
                list: [],
                loading: false,
                loadingdown: false,
                finished: false,
                datalist:[],
                totalPage: 0,
                isparticulars:false,
                id:'',
                datalistlength:false,
                finishedtext:'--------没有更多了--------',
                thisbanck:'',
                isLoading:false,
                count: 0,
                isrequest:true,
                isrequestup:true,
            }
        },
       filters: {
            fontsize(msg) {
                if(msg.length>65){                  
                   return msg.slice(0,60)+'...'
                }else{                   
                   return msg
                }
                
            }
            },

        methods: {
                /*上拉刷新*/
               onRefresh() {
                
                  if(this.isrequest){ 
                      setTimeout(() => { 
                          this.totalPage=1
                                                                 
                             this.init(1,'down')                                                             
                        }, 800);
                  }
                },
            /*下拉加载*/
            onLoad() { 
                
                  setTimeout(() => { 
                      if(this.isrequestup){ 
                        this.loading = true; 
                        this.totalPage++              
                        this.init(this.totalPage,'up')
                       }              
                  }, 800);
              
            },
            /*初始化*/
            init(page,state){
                this.isrequest=false
                this.isrequestup=false
                    this.$getlogin(`member/community/message_list?id=${getCookie('uid')}`,{
                       'page':page,
                       'per_page':7
                   })
                   .then((res)=>{
              
                        this.loading = false;  
                            /*防止重复点击*/
                        this.isrequest=true
                        this.isrequestup=true
                        /*state为down下拉加载  设置数据为空*/
                        if(state=='down'){
                           this.datalist=[]                            
//                         this.datalist=res.items
                           this.loadingdown = false; 
                            for(var i = 0; i < res.items.length; i++) {
                                
                                 res.items[i].nickname = res.items[i].user.nickname
                                 if(res.items[i].content.indexOf('br')>0){
                            
                                     if(res.items[i].content.length>2){ 
                                            if(res.items[i].content.split('<br/>')[0].length>65){
                                              res.items[i].content=res.items[i].content.split('<br/>')[0].slice(0,60)+'...<span style="color: rgba(107, 80, 248, 1);">详情</span>'
                                                
                                            }else{
                                              res.items[i].content=res.items[i].content.split('<br/>')[0]+'...<span style="color: rgba(107, 80, 248, 1);">详情</span>'
                                                
                                            }

                                     }
                                 }else{
                                  
                                     if(res.items[i].content.length>65){ 
                                   
                                       res.items[i].content=res.items[i].content.slice(0,60)+'...<span style="color: rgba(107, 80, 248, 1);">详情</span>'
                                    }
                                 }
                                 this.datalist.push(res.items[i])
                            }
                           if(res.pages>1) {
                               this.finished = false  
                           }
                           if(res.items.length==0){
                               this.datalistlength=true 
                               this.finishedtext='--------暂无帖子--------'
                            }else{
                                this.datalistlength=false
                                this.finishedtext='--------没有更多了--------'
                            }
                        }else{
                            
                           for(var i = 0; i < res.items.length; i++) {
                               
                                 res.items[i].nickname = res.items[i].user.nickname
//                                  console.log(res.items[i].content.indexOf('br'))
                                            
                                 if(res.items[i].content.indexOf('br')>0){
                                    
                                     if(res.items[i].content.length>2){ 
                                                    
                                            if(res.items[i].content.split('<br/>')[0].length>65){
                                              res.items[i].content=res.items[i].content.split('<br/>')[0].slice(0,60)+'...<span style="color: rgba(107, 80, 248, 1);">详情</span>'
                                                
                                            }else{
                                              res.items[i].content=res.items[i].content.split('<br/>')[0]+'...<span style="color: rgba(107, 80, 248, 1);">详情</span>'
                                                
                                            }

                                     }
                                 }else{
                                  
                                     if(res.items[i].content.length>65){ 
                                   
                                       res.items[i].content=res.items[i].content.slice(0,60)+'...<span style="color: rgba(107, 80, 248, 1);">详情</span>'
                                    }
                                 }
                                 this.datalist.push(res.items[i])
                            }
                          
                            if(res.items.length==0){
                               this.datalistlength=true 
                               this.finishedtext='--------暂无帖子--------'
                            }else{
                                this.datalistlength=false 
                                this.finishedtext='--------没有更多了--------'
                            }
                            
                            if(this.totalPage >= res.pages) {
                                
                                this.finished = true
                            }  
                        }
                         
                   })
                   .catch((error)=>{
                       this.loading = false;  
                            /*防止重复点击*/
                        this.isrequest=true
                        this.isrequestup=true
                       this.$toast({
                           "message":this.$error[error.response.data.code],
                           'duration': 5000
                       })
        
                   }) 
            },
         //新增
            onClickRight() {
                var ua = navigator.userAgent.toLowerCase();
                if(/iphone|ipad|ipod/.test(ua)) {   
                  window.webkit.messageHandlers.newlyIncreased.postMessage(`publisharticle`);
                  
                } else if(/android/.test(ua)) {
                   if((typeof jsObj)!="undefined"){   
                        
                      jsObj.newlyIncreased(`publisharticle`) 
                      
                   }else{                   
                    
                   } 
               
                }else{                   
                    this.$router.push({
                        path: '/publisharticle/',                       
                    })
                }               
            },
            /*详情*/
            hometitle(id) {   
               var ua = navigator.userAgent.toLowerCase();
                if(/iphone|ipad|ipod/.test(ua)) {                  
                     window.webkit.messageHandlers.particularsUrl.postMessage(`particulars/?id=${id}`);                 
                    
                } else if(/android/.test(ua)) {
                  if((typeof jsObj)!="undefined"){                        
                      jsObj.particularsUrl(`particulars/?id=${id}`)                       
                   }else{ 
                                        
                   }
                   
                }else{
                    this.$router.push({
                        path: '/particulars/',
                        query: {
                            'id': id,                     
                        }
                    })
                    
                }
                
                }
         },
         /*初始化*/
        mounted(){  
         
           this.loading=true
                this.$postlogin('/member/user/login',{
                  "uid": this.$route.query.uid,
                  "mobile": this.$route.query.mobile,
                  "avatar": this.$route.query.avatar,
                  "nickname": this.$route.query.nickname
           })
           .then((res)=>{
               this.$store.commit('uid',res.data.id)
               this.$store.commit('user',res.data)
               addCookie('uid',res.data.id,7)
               addCookie('userimg',res.data.avatar,7)
               addCookie('nickname',res.data.nickname,7)
               this.id=res.data.id
               this.loading=false
           }) 
           .catch((error)=>{
               
               this.$toast({
                   "message":this.$error[error.response.data.code],
                   'duration': 500
               })
           })
          
        },
        /*设置缓存*/
        beforeRouteLeave(to, from, next) {
            from.meta.keepAlive = true
            next()
         },

    }
</script>
<style type="text/css">
	
</style>
<style scoped="">
    .van-nav-bar {
        /*background: linear-gradient(blue, pink);*/
        /*background: linear-gradient(to right, rgba(34, 82, 232, 1), rgba(227, 76, 230, 1));*/
        position: fixed;
        top: 0rem;
        width: 100%;
        background: url(../img/imgbg.png) no-repeat left top;
        background-size:100% 100% ;
        
    }
    .official{
        background: url(../img/guanfnag@2x.png) no-repeat 0.625rem center;
        background-size:2rem 1.125rem ;
        padding-right: 1.9375rem;
    }
    .van-pull-refresh{
        min-height: 25.625rem;
    }
    .imgss{
        background: url(../img/baij 4@2x.png) no-repeat left top;
        background-size:100% ;
    }
    .van-list__error-text, .van-list__finished-text, .van-list__loading{
        line-height:0rem!important;
        padding: 0.625rem 0rem 1.5625rem 0rem;
    }
    .van-nav-bar__title {
        font-size: 1.125rem;
        color: #fff;
    }
    
    .van-nav-bar__text {
        font-size: 1rem;
        color: #fff;
    }
    
    .hometitle {
        width: 21.25rem;
        min-height: 7.125rem;
        /*border: 0.03125rem solid #666;*/
        margin: 0.625rem auto 0.625rem auto;
        border-radius: 0.625rem;
        box-shadow: 0px 0px 11px 2px #f5f5f5;
    }
    
    .hometitletop {
        display: flex;
        justify-content: space-between;
        padding: 0.625rem 0.625rem 0.125rem 0.625rem;
    }
    
    .homeimg {
        display: flex;
        justify-content: space-between;
    }
    
    .home_img_right {
        width: 0.65625rem;
        height: 0.6875rem;
        padding-right: 0.25rem;
       
       
    }
    .home_p{
        padding-top: 0.2125rem;
    }
    .home_p span:nth-of-type(1) {
        font-size: 1rem;
        color: rgba(88, 88, 103, 1);
        
    }
    
    .home_p span:nth-of-type(2) {
        font-size: 0.75rem;
        color: rgba(197, 199, 210, 1);
    }
    
    .home_p span {
        display: block;
    }
    
    .home_img {
        width: 2.5rem;
        height: 2.5rem;
        display: inline-block;
        padding-right: 0.625rem;
        
         /*background: url(../img/bianzhu2@2x.png) no-repeat left center;
         background-size:2.5rem 2.5rem ;
         border: none;*/
    }
    
    .home_p_span {
        font-size: 0.75rem;
        color: rgba(233, 70, 94, 1);
    }
    
    .home_conent {
        padding: 0.5rem 0.625rem 0.625rem 0.625rem;
        font-size: 0.875rem;
        color: rgba(166, 166, 166, 1);
    }
    
    .homep {
        display: flex;
        justify-content: space-between;
        margin-top: 0.46875rem;
    }
    
    .homep img {
        width: 100%;
    height: 100%;
    object-fit:cover;
        /*height: 6.25rem;*/
    }
    .homepcenter {
        display: flex;
        justify-content: flex-start;
        margin-top: 0.46875rem;
    }

    .homepcenter img {
        width: 100%;
    height: 100%;
    object-fit:cover;
        /*object-fit:cover;*/  
        /*width: 100%;*/
        /*height: 100%;*/
        /*height: 6.25rem;
        margin-right: 0.6rem;*/
    }
    .homepbottom {
        height: 1.875rem;
        line-height: 1.125rem;
        /*padding: 0.625rem 0rem;*/
    }
    
    .homepbottom p {
        float: left;
        color: rgba(197, 199, 210, 1);
        font-size: 0.75rem;
    }
    .homepbottom p:nth-of-type(2) {
        padding-left: 0.525rem;
    }
    
    .homepbottom img:nth-of-type(1) {
        width: 1.125rem;
        height: 1rem;
        padding: 0rem 0.425rem 0rem 0.625rem;
        float: left;
    }
    .homepbottom img {
        width: 1.25rem;
        height: 1.1875rem;
        padding: 0rem 0.425rem 0rem 0.625rem;
        float: left;
    }
</style>